<!-- 交易佣金标准 -->
<template>
    <div>
        <div>
            创建时间：
            <el-date-picker
                    v-model="searchTime"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
            ></el-date-picker>
            <el-button class="ml30" type="primary" @click="searchDataByTime" id="monitorEnter">查询</el-button>
            <el-button type="primary" @click="newPage('new', false)">新建</el-button>
        </div>
        <el-table :data="tableData" highlight-current-row style="width: 100%;margin-top: 20px;">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column property="version" label="版本号" align="center"></el-table-column>
            <el-table-column property="extractStandard" label="计提标准">
                <template slot-scope="scope">成交结算标准</template>
            </el-table-column>
            <el-table-column property="calculationNode" label="计提节点" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="viewCalcNode(scope.row.nodeList)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column property="extractBaseNum" label="计提基数来源" align="center">
                <template slot-scope="scope">{{scope.row.extractBaseNum || '业务成交套数激励'}}</template>
            </el-table-column>
            <el-table-column property="address" label="业务分佣" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="viewCommission(scope.row.id, 'roleList')">
                        {{scope.row.businessComm}}%
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column property="address" label="公佣分佣" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="viewCommission(scope.row.id, 'departList')">
                        {{scope.row.publicComm}}%
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column property="createTime" label="创建时间" align="center"></el-table-column>
            <el-table-column property="creatorName" label="创建人" align="center"></el-table-column>
            <el-table-column property="address" width="100" label="详细信息" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="newPage('view', scope.row.id)">查看</el-button>
                    <el-button type="text" @click="newPage('edit', scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="tableConfig.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="tableConfig.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableConfig.totalSize"
            ></el-pagination>
        </div>
        <!-- 计提比例弹框 -->
        <el-dialog title="查看分佣明细" :visible.sync="commissionDialogVisible" width="50%">
            <div>
                <el-table
                        :data="commissionTableData.data"
                        v-if="commissionTableData.name ==='roleList'"
                        border
                        highlight-current-row
                        style="width: 100%;margin-top: 20px;">
                    <el-table-column type="index" label="序号" width="80"></el-table-column>
                    <el-table-column property="typeName" label="岗位"></el-table-column>
                    <el-table-column property="totalProportion" label="发放总比例%"></el-table-column>
                    <el-table-column property="monthProportion" label="月度发放比例%"></el-table-column>
                    <el-table-column property="yearProportion" label="年度发放比例%"></el-table-column>
                </el-table>
                <el-table
                        :data="commissionTableData.data"
                        v-else
                        border
                        highlight-current-row
                        style="width: 100%;margin-top: 20px;">
                    <el-table-column type="index" label="序号" width="80"></el-table-column>
                    <el-table-column property="typeName" label="部门"></el-table-column>
                    <el-table-column property="totalProportion" label="分配比例%"></el-table-column>
                </el-table>
            </div>

            <span slot="footer">
                <el-button @click="commissionDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title="查看计提节点" :visible.sync="calcNodeVisible" width="50%">
            <div>
                <el-table
                        :data="calcNodeTableData"
                        border
                        highlight-current-row
                        style="width: 100%;margin-top: 20px;">
                    <el-table-column property="projectLevelName" label="类型"></el-table-column>
                    <el-table-column property="calculateNodeNames" label="节点"></el-table-column>
                </el-table>
            </div>
            <span slot="footer">
                <el-button @click="calcNodeVisible = false">关闭</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import api from "@/api/apiPath";
    import {
        extractStandard,
        extractBaseNum,
        calNode,
        extractCategory
    } from "../fieldMap";

    export default {
        name: "transactionCommission",
        title:'交易佣金标准',
        data() {
            return {
                extractStandard,
                extractBaseNum,
                calNode,
                extractCategory,
                searchTime: "",
                tableConfig: {
                    startTime: "",
                    endTime: "",
                    pageNum: 1,
                    pageSize: 10,
                    totalSize: 10
                },
                commissionTableData: {
                    name: "roleList",
                    data: []
                },
                pickerOptions: {
                    shortcuts: [
                        {
                            text: "最近一周",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近一个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近三个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit("pick", [start, end]);
                            }
                        }
                    ]
                },
                commissionDialogVisible: false,
                tableData: [],
                calcNodeTableData: [],
                calcNodeVisible: false
            };
        },
        created() {
            this.getDealAllotList();
        },
        activated(){
            this.searchDataByTime();
        },
        mounted() {
        },
        methods: {
            viewCalcNode(nodeList) {
                this.calcNodeTableData = nodeList;
                this.calcNodeVisible = true
            },
            searchDataByTime() {
                if (this.searchTime === null) {
                    this.searchTime = ["", ""];
                }
                if (this.searchTime.length) {
                    this.tableConfig.startTime = +new Date(this.searchTime[0]);
                    this.tableConfig.endTime = +new Date(this.searchTime[1]);
                }
                this.tableConfig.pageNum = 1;
                this.getDealAllotList();
            },
            newPage(type, id) {
                this.$router.push({
                    path: "./transactionCommissionHandle",
                    query: {type, id}
                });
            },
            viewCommission(id, filed) {
                this.axios.post(api.viewDealAllot, {
                    dealAllotId: id
                }).then((res) => {
                    this.commissionTableData = {
                        name: filed,
                        data: res.data.data[filed]
                    }
                    this.commissionDialogVisible = true;
                })

            },
            getDealAllotList() {
                this.axios
                    .post(api.getDealAllotList, {
                        startTime: this.tableConfig.startTime,
                        endTime: this.tableConfig.endTime,
                        pageNum: this.tableConfig.pageNum,
                        pageSize: this.tableConfig.pageSize
                    })
                    .then(res => {
                        console.log(res);
                        this.tableConfig.totalSize = res.data.data.total;
                        this.tableData = res.data.data.list;
                    });
            },
            handleSizeChange(size) {
                this.tableConfig.pageSize = size;
                this.getDealAllotList();
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page;
                this.getDealAllotList();
            }
        },
        components: {},
        computed: {}
    };
</script>

<style scoped>
</style>
